<template>
  <view class="body">
    <!-- 	<video :src="dataList[1].video_format"></video> -->
    <!-- :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" -->
    <swiper
      :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
      @animationfinish="animationfinish"
      @change="onInnerChange"
      @transition="transitionY"
      :disable-touch="infi"
      circular
      class="inner-swiper"
      :vertical="true"
      :current="0"
    >
      <swiper-item
        ref="si"
        v-for="(item, i) in dataList"
        :key="i"
        :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
      >
        <view
          @disappear="stop()"
          :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
        >
          <!-- v-if="Math.abs(k-i)<=1" -->
          <video
            :ref="'item' + i"
            :id="item.vid"
            :loop="true"
            :src="item.playUrl"
            :muted="false"
            @play="
              (res) => {
                playIngs(res, i)
              }
            "
            :enable-progress-gesture="false"
            :page-gesture="false"
            :controls="true"
            :show-loading="false"
            :show-fullscreen-btn="false"
            :http-cache="true"
            :object-fit="object_fit"
            :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
            @timeupdate="timeupdate($event, i)"
          ></video>
          <!-- <video :src="'http://localhost:8099' + item.url"
						:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'"
					></video> -->
          {{ item.id }} -- {{ item.heard ? 'h' : '' }} {{ item.floor ? 'f' : '' }}
        </view>
      </swiper-item>
    </swiper>

    <!-- style="height: 100vh;"  -->
    <swiper
      v-if="false"
      ref="swiper"
      :style="{ width: windowWidth + 'px', height: boxStyle.height + 'px' }"
      vertical
      @change="onChange"
    >
      <swiper-item ref="si" v-for="(item, i) in dataList" :key="i">
        <view
          @disappear="stop()"
          :style="{ width: windowWidth + 'px', height: boxStyle.height + 'px' }"
        >
          <video
            v-if="Math.abs(k - i) <= 1"
            :ref="'item' + i"
            :id="item.vid"
            :loop="true"
            :src="item.video_format"
            :muted="item.isplay"
            @play="
              (res) => {
                playIngs(res, i)
              }
            "
            :enable-progress-gesture="false"
            :page-gesture="false"
            :controls="true"
            :show-loading="false"
            :show-fullscreen-btn="false"
            :object-fit="object_fit"
            :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
            @timeupdate="timeupdate($event, i)"
          ></video>

          <view
            v-if="dataList[k] && dataList[k].isShowProgressBarTime == true"
            :style="
              'position: absolute; bottom: ' +
              (ProgressBarBottom + 10) +
              'upx; left: ' +
              (windowWidth * 2 - 550) +
              'upx;'
            "
          >
            <text style="font-size: 18px; color: #f1f1f1">{{ changeTime }} / {{ videoTimes }}</text>
          </view>
          <!-- 这里就是进度条了：纯手工进度条，调整位置的话就把他们的 bottom 改成一下就行了 -->
          <view
            v-if="isDragging == false"
            @touchmove="touchmove"
            @touchend="touchend"
            @touchstart="touchstart"
            :style="'position: absolute; bottom: ' + (ProgressBarBottom + 10) + 'rpx; left: 0;'"
          >
            <!-- 1.这一步必须加，为了适配低端机型 -->
            <text :style="'width: ' + windowWidth + 'px; opacity: 0;'">.</text>
            <!-- 2.这是未加载的时的右边的灰色部分 -->
            <view
              :style="
                'width: ' +
                windowWidth +
                'px; height: 4upx; background-color: #C8C7CC; position: absolute; bottom: ' +
                ProgressBarBottom +
                'upx; opacity: ' +
                ProgressBarOpacity +
                ';'
              "
            >
            </view>
            <!-- 3.这里我采用的分离式办法：就是让滑动样式和不滑动的样式分开，这样相互不干扰，可以避免进度条闪动的问题 -->
            <!-- 4.注意：isShowProgressBarTime 加入了返回数据中 -->
            <view
              v-if="dataList[k] && dataList[k].isShowProgressBarTime == false"
              :style="
                'width: ' +
                currentPosition +
                'px; height: 4upx; background-color: #FFFFFF; position: absolute; bottom: ' +
                ProgressBarBottom +
                'upx; left: 0; opacity: ' +
                (ProgressBarOpacity - 0.1) +
                ';'
              "
            >
            </view>
            <view
              v-if="dataList[k] && dataList[k].isShowProgressBarTime == true"
              :style="
                'width: ' +
                currentPositions +
                'px; height: 8upx; background-color: #FFFFFF; position: absolute; bottom: ' +
                ProgressBarBottom +
                'upx; left: 0; opacity: ' +
                (ProgressBarOpacity + 0.05) +
                ';'
              "
            >
            </view>
            <view
              v-if="dataList[k] && dataList[k].isShowProgressBarTime == false"
              :style="
                'width: 4px; height: 4px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: ' +
                (ProgressBarBottom - 2) +
                'upx; left: ' +
                currentPosition +
                'px; opacity: ' +
                ProgressBarOpacity +
                ';'
              "
            >
            </view>
            <view
              v-if="dataList[k] && dataList[k].isShowProgressBarTime == true"
              :style="
                'width: ' +
                dotWidth +
                'px; height: ' +
                dotWidth +
                'px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: ' +
                (ProgressBarBottom - 5) +
                'upx; left: ' +
                (currentPositions - 5) +
                'px; opacity: ' +
                ProgressBarOpacity +
                ';'
              "
            >
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
//import api from '@/common/api.js'
//import user from '@/common/user.js '
import utils from '@/common/utils.js'
import deepClone from 'uview-ui/libs/function/deepClone'
// import myLoading from '@/components/my-loading/my-loading.nvue'
export default {
  // components: {
  // 	myLoading
  // },
  data() {
    return {
      infi: false,
      items: ['item1', 'item2', 'item3', 'item4', '5', 6, 7, 8, 9, 10], // 假设我们只需要4个item
      currentIndex: 0, // 当前活动的内层swiper的索引
      historyList: [],
      historyPageNo: 0,
      nextIndex: 1,
      nextList: [],
      myCurrent: 0,
      transform: '',

      exec: false,
      debounce: '',
      status: 0,
      ward: 1, //1是向下， 0 是向上
      isFresh: 1, //是否是用新鲜数据
      //下面打🌟号的是必须要的基础字段
      //下面打💗号的是拥有滑动条的必须字段
      dataList: [], //用于数据循环的列表🌟💗
      wHeight: 0, //获取的屏幕高度🌟💗
      boxStyle: {
        //视频，图片封面样式🌟💗
        height: 0,
        width: 0
      },
      k: 0, //默认为0🌟💗
      playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
      ready: false, //可忽略
      isDragging: false, //false代表停止滑动🌟💗
      refreshing: true, //用于下拉刷新🌟💗
      windowWidth: 0, //获取屏幕宽度🌟💗
      dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
      currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
      platform: '', //用于获取操作系统：ios、android🌟💗
      playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
      videoTime: '', //视频总时长，这个主要用来截取时间数值💗
      videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
      changeTime: '', //显示滑动进度条时变化的时间💗
      isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
      currenttimes: 0, //当前时间💗
      isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
      ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
      dotWidth: 0, //播放的小圆点，默认没有💗
      deleteHeight: 0, //测试高度🌟💗
      percent: 0, //百分小数💗
      currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
      currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
      newTime: 0, //跟手滑动后的最新时间💗
      timeNumber: 0, //🌟💗
      ProgressBarBottom: 20, //进度条离底部的距离💗
      object_fit: 'contain', //视频样式默认包含🌟💗
      mode: 'aspectFit', //图片封面样式🌟💗
      timeout: '', //🌟用来阻止 setTimeout()方法
      voice: '', //🌟用来阻止 setTimeout()方法
      oldVideo: '',
      statusBarHeight: 0,
      translateX: '10',
      timer: null,
      navIndex: 1, //页面切换
      classIndex: 0,
      classList: [],
      classid: '',
      province: '',
      city: '',
      district: '',
      page: 1,
      recPageNo: 1,
      itemList: [],
      itemList2: [],
      isVideoPlay: false,
      isTabTap: false
    }
  },
  onShow() {
    if (this.dataList.length > 0) {
      //this.animateTranslateX()
      //this.dataList[this.k].state = 'play';
      //uni.createVideoContext(this.dataList[this.k].vid, this).play()
    }
  },

  onHide() {
    if (this.dataList.length > 0) {
      this.dataList[this.k].state = 'pause' //界面隐藏也要停止播放视频
      uni.createVideoContext(this.dataList[this.k].vid, this).pause() //暂停以后继续播放
    }
  },
  onLoad(res) {
    uni.getSystemInfo({
      success: (e) => {
        this.platform = e.platform //获取操作系统
        if (e.model == 'iPhone12' || e.model == 'iPhone11' || e.model == 'iPhoneX') {
          // this.deleteHeight = 32//这里的数值只是做模拟，可自行更改
          this.deleteHeight = 0 //这里的数值只是做模拟，可自行更改
        }
      }
    })
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
    this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
    // this.wHeight = uni.getSystemInfoSync().screenHeight;//获取屏幕高度
    this.wHeight = uni.getSystemInfoSync().windowHeight //获取屏幕可用高度
    this.boxStyle.height = this.wHeight - this.deleteHeight //可以自行更改视频高度，想视频不那么高，就把0改大一点
    this.ready = true
    //this.username = uni.getStorageSync('username')
    //this.recommendVideo(); //这一步，加载视频数据

    if (!res.videoList) {
      this.dataList = [
        {
          vid: 'vid1', //初始状态标志
          state: 'play', //初始状态标志
          isShowAProgressBarTime: false, //是否显示进度条（默认这个即可）
          playIng: true, //播放（默认这个即可）
          isShowimage: false, //是否显示封面（默认这个即可）
          isplay: true, //是否播放音频（默认这个即可）
          playUrl: res.play
        }
      ]

      this.$nextTick(() => {
        uni.createVideoContext('vid1', this).play()
        this.$forceUpdate()
      })

      return
    }

    this.historyList = JSON.parse(res.videoList)
    let currentVideo = [JSON.parse(res.play)]

    // this.historyList.forEach((item,index)=>{
    // 	if(item.id == currentVideo.id){
    // 	}
    // })

    console.log(this.historyList)
    console.log(currentVideo)
    //this.historyList.push(deepClone(res.data))
    currentVideo[currentVideo.length - 1].heard = true
    currentVideo[currentVideo.length - 1].floor = true
    let ids = []
    if (currentVideo.length > 0) {
      currentVideo.forEach((item, index) => {
        item.vid = 'vid' + item.id //初始状态标志
        item.state = 'pause' //初始状态标志
        item.isShowAProgressBarTime = false //是否显示进度条（默认这个即可）
        item.playIng = true //播放（默认这个即可）
        item.isShowimage = false //是否显示封面（默认这个即可）
        item.isplay = true //是否播放音频（默认这个即可）
        item.video_format = item.url
        ids.push(item.id)
      })
      // for (let i = 0; i < videoList.length; i++) {
      // 	self.dataList.push(videoList[i])
      // }
      this.$forceUpdate()
    } else {
      utils.tips('没有更多了')
    }

    this.dataList = currentVideo
    console.log('000', this.dataList)
    this.initVideo()

    this.initClass()
    //this.followVideo();
    // // #ifdef APP-PLUS
    // utils.onUpdate()
    // // #endif
  },
  onReady() {},
  methods: {
    onInnerChange(e) {
      this.status = 0
      console.log('当前', e.detail.current)
      console.log(this.dataList[e.detail.current])
      setTimeout(() => {
        uni.createVideoContext(this.dataList[e.detail.current].vid, this).play()
      }, 50)
      if (e.detail.current == 1 && this.historyPageNo >= this.historyList.length - 1) {
        uni.$u.get('/test', { pageNo: this.nextIndex + 1, pageSize: 3 }).then((res) => {
          this.historyList.push(res.data)
          this.nextIndex += 1
        })
        return
        uni.$u
          .get('/app-api/vlog/info/page', { pageNo: this.nextIndex + 1, pageSize: 3 })
          .then((res) => {
            self.refreshing = false
            self.isTabTap = false
            let videoList = res.data.list
            let ids = []
            videoList.forEach((item, index) => {
              item.vid = 'vid' + item.id //初始状态标志
              item.state = 'pause' //初始状态标志
              item.isShowAProgressBarTime = false //是否显示进度条（默认这个即可）
              item.playIng = true //播放（默认这个即可）
              item.isShowimage = false //是否显示封面（默认这个即可）
              item.isplay = true //是否播放音频（默认这个即可）
              item.video_format = item.playUrl
              ids.push(item.id)
            })

            //uni.$u.get("/app-api/vlog/info/check-actions",{ids: ids.join("")}).then(res=>{

            //console.log("check",res)
            // this.dataList.forEach((item, index)=>{
            // 	item.liked = res.data[index].liked
            // 	item.favorite = res.data[index].favorite
            // 	item.comment = res.data[index].comment
            // 	item.follow = res.data[index].liked
            // })
            //},err=>{
            //console.log("..,",err)
            //})
            //this.historyList.push()
            //videoList.push(this.historyList[this.historyList.length - 1])
            //this.nextList = videoList; //这个就是赋值加载视频啦
            //self.initVideo() //这一步，加载视频数据
            //self.$forceUpdate();
            let arr1 = videoList[0]
            videoList.shift()
            videoList.splice(2, 0, this.dataList[this.dataList.length - 1], arr1)
            this.historyList.push(videoList)

            this.nextIndex += 1
            //this.nextList = [5, 6, 3,4]
            //this.historyList.push([5,6, 3, 4])
          })
      }
    },
    animationfinish(e) {
      this.myCurrent = e.detail.current
      uni.createVideoContext(this.dataList[this.myCurrent].vid, this).play()
    },
    transitionY(e) {
      //console.log(e.detail.dy)
      //console.log("sy當前",this.status, this.dataList[this.myCurrent].floor)
      //console.log(this.dataList[this.myCurrent])
      if (e.detail.dy > 30) {
        if (e.detail.dy > 200) {
          uni.createVideoContext(this.dataList[this.myCurrent].vid, this).pause()
        }

        if (!this.dataList[this.myCurrent]?.floor) {
          return
        }
        if (this.status == 0) {
          this.status = 1
          this.handleNext(e)
        }
        return
      }

      if (e.detail.dy < -25) {
        if (e.detail.dy < -150) {
          uni.createVideoContext(this.dataList[this.myCurrent].vid, this).pause()
        }
        if (!this.dataList[this.myCurrent]?.heard) {
          return
        }
        if (this.status == 0) {
          this.status = 1
          this.handleBack(e)
        }
        return
      }
    },
    handleNext(e) {
      let videoList = ''

      console.log('向下')

      let currentVideo = this.dataList[this.myCurrent]
      currentVideo.floor = false
      currentVideo.heard = true
      this.historyPageNo += 1
      videoList = deepClone(this.historyList[this.historyPageNo])
      videoList[2].floor = true
      let arr = []
      if (this.myCurrent == 0) {
        arr = [currentVideo, ...videoList]
      } else if (this.myCurrent == 1) {
        arr = [videoList[2], currentVideo, videoList[0], videoList[1]]
      } else if (this.myCurrent == 2) {
        arr = [videoList[1], videoList[2], currentVideo, videoList[0]]
      } else if (this.myCurrent == 3) {
        arr = [...videoList, currentVideo]
      }

      let ids = []
      arr.forEach((item, index) => {
        item.vid = 'vid' + item.id //初始状态标志
        item.state = 'pause' //初始状态标志
        item.isShowAProgressBarTime = false //是否显示进度条（默认这个即可）
        item.playIng = true //播放（默认这个即可）
        item.isShowimage = false //是否显示封面（默认这个即可）
        item.isplay = true //是否播放音频（默认这个即可）
        item.video_format = item.url
        ids.push(item.id)
      })
      // for (let i = 0; i < videoList.length; i++) {
      this.dataList = arr
      console.log(this.dataList)
      //this.dataList = this.dataList.length == 3 ?  : [videoList[2], currentVideo, videoList[0], videoList[1]]
      // console.log(this.dataList)
    },
    handleBack(e) {
      let videoList = ''
      console.log('回去')

      // if(this.historyList[0].id == this.dataList[e].id){
      // 	console.log("到顶了")
      // }
      let currentVideo = this.dataList[this.myCurrent]
      this.historyPageNo -= 1
      this.historyPageNo =
        this.historyPageNo == -1 ? this.historyList.length - 1 : this.historyPageNo
      videoList = deepClone(this.historyList[this.historyPageNo])
      videoList[0].heard = true

      //videoList[videoList.length - 1].floor = true

      videoList[videoList.length - 1].floor = true
      if (this.myCurrent == 0) {
        this.dataList = [videoList[2], videoList[0], videoList[1]]
      } else if (this.myCurrent == 1) {
        this.dataList = [videoList[1], videoList[2], videoList[0]]
      } else if (this.myCurrent == 2) {
        this.dataList = [videoList[0], videoList[1], videoList[2]]
      } else if (this.myCurrent == 3) {
        this.dataList = [videoList[0], videoList[1], videoList[2]]
      }
      //this.dataList = [videoList[1] , currentVideo, videoList[0] ]
      console.log(this.dataList)
    },

    onPause() {
      if (this.dataList.length > 0) {
        if (this.navIndex == 1) {
          uni.createVideoContext(this.dataList[this.k].vid, this).play()
          this.dataList[this.k].state = 'continue'
        } else {
          uni.createVideoContext(this.dataList[this.k].vid, this).pause()
          this.dataList[this.k].isShowimage = false
          this.dataList[this.k].isShowProgressBarTime = false
          this.ProgressBarOpacity = 0.5
          this.dotWidth = 0
          this.dataList[this.k].state = 'pause'
        }
        this.$forceUpdate()
      }
    },
    onChange(event) {
      console.log(event.detail.current)
      this.navIndex = event.detail.current
      this.$refs.si[event.detail.current].$el.style.marginTop = this.wHeight + 'rpx'
      //this.dataList.shift()
      this.onPause()
      if (this.navIndex == 0) {
        this.initClass()
        if (this.city) {
          this.nearbyVideo()
        } else {
        }
      }
      if (this.navIndex == 2) {
        this.followVideo()
      }
    },
    animateTranslateX() {
      let num = this.dataList[this.k].desc.length * 5
      this.timer = setInterval(() => {
        this.translateX--
        if (this.translateX == -(num + 35)) {
          this.translateX = num
        }
      }, 60)
    },
    onTabItem(index) {
      if (index == 0) {
        if (this.isTabTap == false) {
          this.isTabTap = true
          if (this.navIndex == 0) {
            this.initClass()
            this.nearbyVideo(true)
          }
          if (this.navIndex == 1) {
            this.page = 1
            this.recommendVideo()
          }
          if (this.navIndex == 2) {
            this.followVideo()
          }
        } else {
          utils.tips('刷新中，请勿重复点击')
        }
      } else {
        //utils.reLaunch(index, 2);
      }
    },
    initLocation() {
      // this.amapPlugin = new amap.AMapWX({
      // 	key: this.amapKey
      // });
      // this.amapPlugin.getRegeo({
      // 	success: (data) => {
      // 		this.cityName = data[0].name;
      // 	}
      // })
      uni.getLocation({
        // #ifdef APP-PLUS
        type: 'gcj02',
        geocode: true,
        isHighAccuracy: true,
        // #endif
        success: (res) => {
          if (res.address) {
            this.province = res.address.province
            this.city = res.address.city
            this.district = res.address.district
            uni.setStorageSync('address', res.address)
          }
          //self.nearbyVideo();
        },
        fail: function (res) {
          utils.tips('定位失败，请检查权限和定位是否打开', 2000)
          //self.nearbyVideo();
        },
        complete: function (res) {}
      })
    },
    initClass() {
      let self = this
    },

    nearbyVideo() {
      let self = this
    },
    recommendVideo() {
      let self = this
      return
      uni.$u.get('/app-api/vlog/info/page', { pageNo: this.recPageNo, pageSize: 3 }).then((res) => {
        self.refreshing = false
        self.isTabTap = false
        let videoList = res.data.list
        let ids = []
        videoList.forEach((item, index) => {
          item.vid = 'video' + item.id //初始状态标志
          item.state = 'pause' //初始状态标志
          item.isShowAProgressBarTime = false //是否显示进度条（默认这个即可）
          item.playIng = true //播放（默认这个即可）
          item.isShowimage = false //是否显示封面（默认这个即可）
          item.isplay = true //是否播放音频（默认这个即可）
          item.video_format = item.playUrl
          ids.push(item.id)
        })

        //uni.$u.get("/app-api/vlog/info/check-actions",{ids: ids.join("")}).then(res=>{

        //console.log("check",res)
        // this.dataList.forEach((item, index)=>{
        // 	item.liked = res.data[index].liked
        // 	item.favorite = res.data[index].favorite
        // 	item.comment = res.data[index].comment
        // 	item.follow = res.data[index].liked
        // })
        //},err=>{
        //console.log("..,",err)
        //})
        self.dataList = videoList //这个就是赋值加载视频啦
        self.initVideo() //这一步，加载视频数据
        self.$forceUpdate()

        this.historyList.push(videoList)
      })

      this.dataList = [-1, -2, -3]
      this.historyList.push([-1, -2, -3])
    },
    followVideo() {
      let self = this
      uni.$u.get('/app-api/vlog/info/follow-page').then((res) => {
        self.isTabTap = false
        if (res && res.code == 0) {
          self.itemList2 = res.list
        }
      })
    },
    onTabSelect(index) {
      this.navIndex = index
      if (index == 0) {
        if (!uni.getStorageSync('address')) {
          this.initLocation()
        }
        this.initClass()
        if (this.city) {
          this.nearbyVideo()
        } else {
        }
      }
      if (index == 2) {
        this.followVideo()
      }
      this.onPause()
    },
    tabsChange(index) {
      this.classIndex = index
      this.classid = this.classList[this.classIndex].id
      this.nearbyVideo()
    },
    onQueryVideo() {
      //utils.jump('/pages/query-video/query-video');
    },

    getData() {
      let self = this
      this.recPageNo += 1
      uni.$u
        .get('/app-api/vlog/info/page', { pageNo: this.recPageNo, pageSize: 10 })
        .then((res) => {
          var videoList = res.data.data
          if (videoList && videoList.length > 0) {
            videoList.forEach((item, index) => {
              item.vid = 'video' + item.id //初始状态标志
              item.state = 'pause' //初始状态标志
              item.isShowAProgressBarTime = false //是否显示进度条（默认这个即可）
              item.playIng = true //播放（默认这个即可）
              item.isShowimage = false //是否显示封面（默认这个即可）
              item.isplay = true //是否播放音频（默认这个即可）
              item.video_format = item.playUrl
              ids.push(item.id)
            })
            for (let i = 0; i < videoList.length; i++) {
              self.dataList.push(videoList[i])
            }
            self.$forceUpdate()
          } else {
            utils.tips('没有更多了')
          }
        })
    },
    touchstart(event) {
      this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
      this.dataList[this.k].isShowProgressBarTime = true //显示时间线
      this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
      this.dotWidth = 10 //让点显示起来更明显一点
    },
    touchend() {
      //当手松开后，跳到最新时间
      uni.createVideoContext(this.dataList[this.k].vid, this).seek(this.newTime)
      if (this.dataList[this.k].state == 'pause') {
        this.dataList[this.k].state = 'play'
        uni.createVideoContext(this.dataList[this.k].vid, this).play()
      }
      this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
      this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
      this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
      this.dotWidth = 0 //隐藏起来进度条，不那么明显了
    },
    touchmove(event) {
      //当手移动滑块时，计算位置、百分小数、新的时间
      var msg = []
      if (this.videoTime !== '') {
        msg = this.videoTime.split(':')
      }
      var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
      this.currentPositions = event.changedTouches[0].screenX
      this.percent = this.currentPositions / this.windowWidth
      this.newTime = this.percent * timeNumber
      this.currenttimes = parseInt(this.newTime)
      let theTime = this.newTime
      let middle = 0 // 分
      if (theTime > 60) {
        middle = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
      }
      this.changeTime = `${Math.round(middle) > 9 ? Math.round(middle) : '0' + Math.round(middle)}:${Math.round(theTime) > 9 ? Math.round(theTime) : '0' + Math.round(theTime)}`
    },
    timeupdate(event, index) {
      //计算滑块当前位置，计算当前百分小数
      if (index == this.k) {
        var currenttime = event.detail.currentTime
        this.timeNumber = Math.round(event.detail.duration)
        this.getTime()
        this.percent = currenttime / this.timeNumber
        this.currentPosition = this.windowWidth * this.percent
        let theTime = currenttime
        let middle = 0 // 分
        if (theTime > 60) {
          middle = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
        }
        this.changeTime = `${Math.round(middle) > 9 ? Math.round(middle) : '0' + Math.round(middle)}:${Math.round(theTime) > 9 ? Math.round(theTime) : '0' + Math.round(theTime)}`
      }
    },
    getTime() {
      //得到时间函数
      this.videoTime = this.formatSeconds(this.timeNumber)
      var msg = []
      if (this.videoTime !== '') {
        msg = this.videoTime.split(':')
      }
      this.videoTimes = `${msg[0] > 9 ? msg[0] : '0' + msg[0]}:${msg[1] > 9 ? msg[1] : '0' + msg[1]}`
    },
    formatSeconds(value) {
      //获取时间函数
      let theTime = parseInt(value) // 秒
      let middle = 0 // 分
      if (theTime > 60) {
        middle = parseInt(theTime / 60)
        theTime = parseInt(theTime % 60)
      }
      return `${middle > 9 ? middle : middle}:${theTime > 9 ? theTime : theTime}`
    },
    playIngs(res, index) {
      this.dataList[index].playIng = true
      if (this.isVideoPlay == false) {
        this.isVideoPlay = true
        let vid = this.dataList[index].id
        // user.videoPlay({
        // 	video_id: vid
        // }, false).then(res => {
        // 	if (res && res.code == 0) {}
        // })
      }
    },
    stop() {},
    scrolls(event) {
      this.isDragging = event.isDragging
      if (!event.isDragging) {
        //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
        var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight + 1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
        if (i !== this.k) {
          //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
          this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
          this.isVideoPlay = false
          this.dataList[this.k].state = 'play'
          this.refreshing = false
          this.dataList[this.k].playIng = true
          console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
        }
      }
    },
    initVideo() {
      let self = this
      this.dataList[0].state = 'play'
      console.log('099', self.dataList[0].vid)
      uni.createVideoContext(self.dataList[0].vid, self).play()
      // 这个方法主要就是用来第一次进入视频播放时用来处理的
      return
      setTimeout(() => {
        //这里的延迟是为了避免执行时间太快而直接跳过执行的 bug

        uni.createVideoContext(self.dataList[0].vid, self).play()
      }, 200)
      this.dataList[this.k].isplay = false
      setTimeout(() => {
        self.dataList[this.k].playIng = true
      }, 500)
      var p = 0
      setTimeout(() => {
        ++p
        if (self.dataList[p]) {
          uni.createVideoContext(self.dataList[p].vid, self).play()
          setTimeout(() => {
            uni.createVideoContext(self.dataList[p].vid, self).seek(0)
            uni.createVideoContext(self.dataList[p].vid, self).pause()
            console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].vid)
          }, 2000)
        }
      }, 50)
    },
    onpullingdown() {
      this.refreshing = true
    },
    onrefresh() {
      this.page = 1
      this.recommendVideo()
    },
    //点击播放&&暂停
    tapVideoHover(state, event) {
      this.dataList[this.k].isShowimage = false
      this.dataList[this.k].isShowProgressBarTime = false
      this.ProgressBarOpacity = 0.5
      this.dotWidth = 0
      if (state == 'play' || state == 'continue') {
        this.dataList[this.k].state = 'pause'
      } else {
        this.dataList[this.k].state = 'continue'
      }
      if (this.dataList[this.k].state == 'continue') {
        uni.createVideoContext(this.dataList[this.k].vid, this).play() //暂停以后继续播放
      }
      if (this.dataList[this.k].state == 'pause') {
        uni.createVideoContext(this.dataList[this.k].vid, this).pause() //暂停以后继续播放
      }
    },
    onSeller(item) {
      if (item.identity_type == 2) {
        //商家
        uni.showToast({
          title: '当前角色，无法查看其他商家',
          icon: 'none'
        })
      }
      if (item.identity_type == 3) {
        //厂家
        utils.jump('/seller/store-shop/shop-info/shop-info?id=' + item.user.factory.id, true)
      }
      if (item.identity_type == 4) {
        //表演者
        utils.jump('/pages/shop/service-shop/service-shop?id=' + item.user.performer.id, true)
      }
    },
    onFollow(item) {
      this.$u.get('/app-api/vlog/info/follow-page').then((res) => {})

      // user.followOrCancel({
      // 	follow_uid: item.uid
      // }, false).then(res => {
      // 	if (res && res.code == 0) {
      // 		item.is_follow = 1;
      // 		self.onUpdate();
      // 		self.$forceUpdate();
      // 	}
      // });
    },
    onUpdate() {},
    toComment(item) {
      uni.getSubNVueById('storeComment').show('slide-in-bottom', 200, () => {})
      uni.setStorageSync('videoid', item.id)
      uni.$emit('sendload', item)
    },
    onCollet(item) {
      if (item.favorite) {
        this.$u.post('/app-api/vlog/favorite/delete', { vlogId: item.id }).then((res) => {
          item.favorite = !item.favorite
          this.$forceUpdate()
        })
      } else {
        this.$u.post('/app-api/vlog/favorite/create', { vlogId: item.id }).then((res) => {
          item.favorite = !item.favorite
          this.$forceUpdate()
        })
      }
    },
    onLike(item) {
      if (item.liked) {
        // console.log(this)
        // console.log(this.$u)
        // console.log(uni)
        uni.$u.post('/app-api/vlog/liked/delete', { vlogId: item.id }).then((res) => {
          item.liked = !item.liked
          this.$forceUpdate()
        })
      } else {
        uni.$u.post('/app-api/vlog/liked/create', { vlogId: item.id }).then((res) => {
          item.liked = !item.liked
          this.$forceUpdate()
        })
      }
    },
    onVideoDetails(item) {
      //utils.jump('/factory/nearby-video/nearby-video?id=' +
      //	item.id + '&province=' + this.province + '&city=' + this.city + '&district=' + this.district);
    },
    onVideoDetails2(item) {
      //utils.jump('/factory/follow-video/follow-video?id=' + item.id);
    }
  }
}
</script>
<style>
.outer-swiper {
  height: 800rpx; /* 根据需要设置高度 */
  background-color: #888888;
  width: 100%;
  position: relative;
}
.inner-swiper {
  height: 700rpx;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
}

.body {
  flex: 1;
  background-color: #000000;
}

.custom-lb-tabbar2 {
  width: 750rpx;
  height: 100rpx;
  box-shadow: 0px -1px 4rpx 0px rgba(153, 153, 153, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  z-index: 1000;
  position: fixed;
  bottom: 0px;
}

.custom-lb-tabbar-item2 {
  flex: 1;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.custom-lb-tabbar-icon2 {
  width: 24px;
  height: 24px;
}

.custom-lb-tabbar-mid2 {
  width: 64rpx;
  height: 64rpx;
}

.custom-lb-tabbar-title2 {
  font-size: 12px;
  color: #009a74;
  margin-top: 12rpx;
}

.custom-lb-tabbar-title3 {
  font-size: 12px;
  color: #949998;
  margin-top: 12rpx;
}

.swiper-body {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
}

.swiperItem {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  display: flex;
  flex-direction: column;
}

.swiperItem2 {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  display: flex;
  flex-direction: column;
  background: #000000;
}

.layoutView {
  flex: 1;
  /* #ifdef  H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  top: 160rpx;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.tabs-view {
  flex-direction: row;
  align-items: center;
  padding: 30rpx 20rpx;
}

.tabs-view2 {
  flex: 1;
  flex-direction: column;
  margin-bottom: 120rpx;
}

.tabs-view::-webkit-scrollbar {
  /* display: none; */
  width: 0 !important;
  height: 0 !important;
  /* -webkit-appearance: none; */
  background: transparent;
}

.tabs-item {
  font-size: 28rpx;
  font-weight: 400;
  color: #009a74;
  padding: 10rpx 20rpx;
  background: #c7e8cb;
  border-radius: 24rpx;
  margin-right: 20rpx;
}

.tabs-item2 {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  padding: 10rpx 20rpx;
  background: #e6e6e6;
  border-radius: 24rpx;
  margin-right: 20rpx;
}

.product-list {
  padding: 20rpx;
  /* box-sizing: border-box; */
  flex-direction: row;
  margin-bottom: 150rpx;
}

.product-item {
  flex: 1;
  flex-direction: column;
}

.product-data {
  flex-direction: column;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.product-img {
  height: 500rpx;
  border-radius: 10rpx 10rpx 0px 0px;
}

.product-user {
  flex-direction: row;
  align-items: center;
  padding: 10rpx 0px;
}

.like-user {
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  z-index: 100;
}

.product-user-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-left: 20rpx;
}

.product-user-name {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 10rpx;
}

.product-collect {
  width: 28rpx;
  height: 28rpx;
}

.product-collect-num {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
  margin-left: 10rpx;
}

.top_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1900;
}

.top_nav .top_content {
  padding-top: 30rpx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.top_nav .top_content .player {
  position: absolute;
  left: 20px;
  top: 35rpx;
}

.top_nav .top_content .img {
  width: 44rpx;
  height: 44rpx;
}

.top_nav .top_content .content_btn {
  flex-direction: row;
  width: 220px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.top_nav .top_content .content_btn .content_item {
  position: relative;
  height: 30px;
}

.top_nav .top_content .content_btn .content_item .line_on {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  bottom: 0;
  left: 2px;
  border-radius: 4upx;
}

.top_nav .top_content .content_btn .content_item .line_on2 {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #009a74;
  bottom: 0;
  left: 2px;
  border-radius: 4upx;
}

.top_nav .top_content .content_btn .content_item .item_title {
  color: #dcdcdc;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title2 {
  color: #009a74;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title3 {
  color: #999999;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .item_title4 {
  color: #666;
  font-size: 36rpx;
  /* font-weight: bold; */
}

.top_nav .top_content .content_btn .content_item .i_on {
  /* font-weight: bold; */
  font-size: 38rpx;
  color: #ffffff !important;
}

.top_nav .top_content .content_btn .content_item .i_on2 {
  /* font-weight: bold; */
  font-size: 38rpx;
  color: #009a74 !important;
}

.top_nav .top_content .search {
  position: absolute;
  right: 20px;
  top: 35upx;
}

.logins {
  width: 80upx;
  height: 40upx;
  margin-top: 80upx;
  margin-bottom: 30upx;
}

.left_dubbedText {
  color: #ffffff;
  font-size: 15px;
  flex-direction: row;
  margin-top: 16rpx;
}

.left_dubbedText_text {
  color: #eee;
  font-size: 15px;
  line-height: 50upx;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.item {
  background-color: #000000;
  position: relative;
}

.videoHover {
  position: absolute;
  top: 0;
  left: 0;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
}

.playState {
  width: 160rpx;
  height: 160rpx;
  opacity: 0.7;
}

.userInfo {
  position: absolute;
  bottom: 330rpx;
  right: 20px;
  flex-direction: column;
}

.avatarView {
  display: flex;
  flex-direction: column;
  position: relative;
}

.userAvatar {
  width: 86rpx;
  height: 86rpx;
  border-radius: 500%;
  margin-bottom: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}

.add {
  position: absolute;
  bottom: 15upx;
  left: 24rpx;
  color: white;
  font-size: 28upx;
  width: 34upx;
  height: 34upx;
  background: #f12f5b;
  border-radius: 50%;
  text-align: center;
  line-height: 36upx;
  font-weight: bold;
}

.coverFollow {
  width: 68rpx;
  height: 68rpx;
  position: absolute;
  right: 6px;
}

.followNum {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
}

.likeIco {
  width: 60rpx;
  height: 60rpx;
  margin-top: 15px;
}

.commentIcon {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 7px;
}

.rightCover {
  opacity: 0.9;
  margin-top: 17px;
}

.shareIcon {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 5px;
}

.shareText {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  margin-top: 40px;
}

.commentNum {
  color: #ffffff;
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
}

.likeNum {
  color: #ffffff;
  font-size: 30rpx;
  text-align: center;
  margin: 5px;
}

.content {
  width: 720rpx;
  z-index: 99;
  position: absolute;
  bottom: 120rpx;
  padding: 15rpx;
  flex-direction: column;
  justify-content: flex-start;
  color: #ffffff;
}

.userName {
  font-size: 34rpx;
  color: #ffffff;
  margin-top: 80upx;
  font-weight: bold;
}

.words {
  margin-top: 16rpx;
  font-size: 30rpx;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.root {
  background-color: #000000;
}

.coverimage {
  width: 120upx;
  height: 160upx;
  border-radius: 10upx;
  position: absolute;
}

.nullView {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 150rpx 0px;
}

.nullImage {
  width: 410rpx;
  height: 240rpx;
}

.nullTitle {
  font-size: 28rpx;
  font-weight: 400;
  color: #b2b3b8;
  margin-top: 30rpx;
}
</style>
